<script setup>
import { ref, reactive, nextTick, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter()
const search = ref("");
const checked1 = ref(true)
const checked2 = ref(false)




// 隐藏所有的条件
const downUpStyle = ref(false)
const downUpSlider = () => {
    downUpStyle.value = !downUpStyle.value
}
// 下面是表格的样式


// 下面是 分页****** const myRef = ref(null);
const currentPage4 = ref(1)
const pageSize4 = ref(100)
const disabled = ref(false)
const total = ref(400)
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
}
// 企业类型企业状态
const props = { multiple: true }

const options = [
    { value: 3, label: 'Beijing' },
    { value: 4, label: 'Shanghai' },
    { value: 5, label: 'Hangzhou' },
]
const value1 = ref(3)
const value2 = ref(4)

const tableData = ref([
    {
        id: 1,
        name: "华为",
        longName: "华为公司***",
        person: "张三",
        date: "2021-12-18",
        address: "郑州市动物园"
    },
    {
        id: 2,
        name: "华为",
        longName: "华为公司***",
        person: "张三",
        date: "2021-12-18",
        address: "郑州市动物园"
    },
    {
        id: 2,
        name: "华为",
        longName: "华为公司***",
        person: "张三",
        date: "2021-12-18",
        address: "郑州市动物园"
    }
])
const goDyjsdesc=(id)=>{
 router.push("/qyjsdesc")
}


</script>
<template>
    <div class="bigmiddiv bgwhite bordergray">
        <!-- <el-input v-model="search" style="width: 240px" placeholder="" />
      <el-button type="primary">搜索</el-button> -->
        <el-input v-model="search" class="searchinput" style="width: 731px;" placeholder="请输入标项名称等关键词，例如：理疗设备">
            <template #append>
                <el-button type="primary" class="searchprimary">搜索</el-button>
            </template>
        </el-input>
    </div>
    <!--  -->
    <section class="bigmiddiv bgwhite" :class="[downUpStyle ? 'downUpStyle' : '']">
        <div class="flex searchitem">
            <span class="leftgray">已选条件:</span>
            <div class="flexbewteen searchtj">
                <span>默认</span>
                <div class="blue flex" @click="clearFun">

                    <el-icon>
                        <Delete />
                    </el-icon>

                    <span>清空</span>
                </div>
            </div>
        </div>
        <div class="flex searchitem">
            <span class="leftgray">搜索范围:</span>
            <div class="righticon">
                <div>
                    <el-checkbox v-model="checked1" label="企业名称" size="large" />
                    <el-checkbox v-model="checked2" label="企业联系人" size="large" />
                </div>
            </div>

        </div>
        <div class="flex searchitem">
            <span class="leftgray">更多筛选:</span>
            <div class="righticon">
                <div>

                    <el-cascader class="moreSearch" v-model="value1" :options="options" :props="props" clearable />
                    <el-cascader class="moreSearch" v-model="value2" :options="options" :props="props" clearable />
                </div>
            </div>

        </div>



    </section>
    <div class="center">
        <el-icon :class="['iconupdown', downUpStyle ? 'activeroute' : '']" @click="downUpSlider">
            <ArrowDown />
        </el-icon>
    </div>



    <div class="bigmiddiv  tablecon">
        <!-- {{ multipleSelection }} -->
        <div class="tabletitle flexbewteen">
            <section class="lefttitle">
                搜索到<span>254500</span>
            </section>

        </div>
        <ul>
            <li @click="goDyjsdesc(item.id)" class="flex  liitem" v-for="item in tableData" :key="item.id">
                <div class="leftName">
                    {{ item.name }}
                </div>
                <div class="rightcon">
                    <p class="longName">
                        {{ item.longName }}
                        <span class="tag">注销</span>
                        <span class="tag redtag">注销</span>
                        <span class="tag bluetag">注销</span>
                    </p>
                    <p>
                        法定代表人:<span class="blue">{{ item.person }}</span>
                        成立日期:{{ item.date }}
                    </p>
                    <p>
                        经营地址:{{ item.address }}
                    </p>
                </div>
            </li>
        </ul>
        <el-pagination class="pagination" v-model:current-page="currentPage4" v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]" :background="true" size="small" :disabled="disabled"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>

</template>

<style scoped lang="scss">
.tag {
    font-size: 14px;
    padding: 0px 5px;
    border: 1px solid #b1bebd;
    margin-left: 10px;
    border-radius: 4px;
}

.bluetag {
    color: #3873FF;
}

.redtag {
    color: #ff0000;
}

.moreSearch {
    margin-right: 20px;
}

.liitem {
    align-items: flex-start;
    color: #b1bebd;

    .blue {
        color: #3873FF;
        margin-right: 16px;
    }

    .rightcon {
        line-height: 2;
    }

    .longName {
        font-size: 18px;
        color: black;
        font-weight: bold;
    }

    .leftName {
        padding: 10px;
        font-size: 20px;
        background: hsl(197, 91%, 70%);
        margin-right: 16px;
        border-radius: 10px;
        font-weight: bold;
        color: black;
    }
}

.searchinput {
    border: 1px solid #3873FF;
    border-right: 0;
    border-radius: 4px;

    .el-input__wrapper {
        border: 0 !important;
    }

    .searchprimary {
        background: #3873FF !important;
        color: white !important;
    }

}

.leftgray {
    color: #888B98;
    font-size: 14px;
    width: 80px;
}

.righticon {
    flex: 1;
}

.searchitem {
    margin-bottom: 22px;
    flex-wrap: wrap;
    align-items: flex-start;

    .itemspan {
        background: none;
        padding: 2px 8px;
        margin-right: 10px;
        border-radius: 4px;
        display: inline-block;
        cursor: pointer;
        margin-bottom: 10px;
    }

    .active {
        background: #3873FF !important;
        color: white !important;
    }

}

.searchtj {
    flex: 1;
}

.blue {
    color: #3873FF;

}

.tallbox {
    border-radius: 8px;
    background: #FAFAFA;
    padding: 24px;
    display: none;
}

.heightStyle {
    display: block;
}

.boldb {
    font-weight: bold;
}

.formtitle {
    margin-bottom: 20px;
}

.doubledown {
    width: 16px;
    height: 16px;
}

.activeroute {
    transform: rotate(180deg);
}

.Vector {
    width: 14px;
    height: 4px;
    margin: 0 4px;
}

.iconupdown {
    position: relative;
    top: -9px;
    font-size: 20px;
    background: white;
    // padding: 5px 20px;
    border-radius: 10px;
    display: inline-block;
    width: 60px;
}

.downUpStyle {
    display: none;
}

.tablecon {
    padding: 16px;
    background: white;

    .tabletitle {
        font-size: 14px;
        margin-bottom: 16px;

        b {
            font-weight: bold;

        }

        .lefttitle {
            span {
                color: #3873FF;
                font-weight: bold;
            }
        }

        .manyExport {
            margin-right: 20px;

        }

    }
}



.popovercon {
    .itemspan {
        display: inline-block;
        padding: 3px;
        margin: 5px;
        border: 1px solid #f1f1f1;
        border-radius: 4px;
        cursor: pointer;
    }
}
</style>
